<template>
	<view style="padding-bottom: 31rpx;">
		<view class="mine-nav">
			<image :src="$IMG_URL+'bg_wallet.png'" mode="widthFix" style="width: 750rpx;"></image>
			<view class="nav-top">
				<view class="nav-con">
					<view class="nav-bg" :style="[{ opacity: opacityVal}]"></view>
					<u-navbar bgColor="transparent" placeholder :fixed="true" title="我的" titleStyle="color:#fff">
						<view class="u-nav-slot" slot="left"></view>
						<!-- #ifndef MP-WEIXIN -->
						<view class="u-nav-slot" slot="right">
							<view style="margin-right: 31rpx;" @click="goPath('/pages/user/set/set')">
								<u-icon name="setting" color="#FFFFFF" size="35rpx"></u-icon>
							</view>

						</view>
						<!-- #endif -->
					</u-navbar>
				</view>
				<view :style="[{height:topHeight}]">

				</view>
				<view class="mine-avatar">
					<u-avatar :src="src" size="150rpx"></u-avatar>
					<view class="avatar-text">
						<view class="flex-row">
							<view style="font-weight: 500;font-size: 38rpx;">用户昵称</view>
							<image :src="$IMG_URL+'icon_margin.png'"
								style="width: 46rpx;height: 46rpx;margin-left: 12rpx;"></image>
							<image :src="$IMG_URL+'icon_verified.png'"
								style="width: 46rpx;height: 46rpx;margin-left: 8rpx;"></image>
						</view>
						<view class="flex-row">
							<view>199****6285</view>
							<!-- #ifdef MP-WEIXIN -->
							<view style="margin-left: 240rpx;margin-top: 30rpx;" @click="goPath('/pages/user/set/set')">
								<u-icon name="setting" color="#FFFFFF" size="46rpx"></u-icon>
							</view>
							<!-- #endif -->
						</view>

						<view>工号：83</view>
					</view>

				</view>
				<view class="nav-middle">
					<view class="middle-item">
						<view>初级</view>
						<view class="item-text">师傅等级</view>
					</view>
					<view class="middle-item">
						<view>4.90</view>
						<view class="item-text">综合分</view>
					</view>
					<view class="middle-item">
						<view>5.00</view>
						<view class="item-text">信用分</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nav-list">
			<view class="nav-list-list" @click="goPath('/pages/user/wallet/wallet')">
				<image :src="$IMG_URL+'wallet.png'" class="item-img"></image>
				<view style="margin-top: 8rpx;">我的钱包</view>
			</view>
			<view class="nav-list-list" @click="goPath('/pages/user/cash/cash')">
				<image :src="$IMG_URL+'margin.png'" class="item-img"></image>
				<view style="margin-top: 8rpx;">保证金</view>
			</view>
			<view class="nav-list-list" @click="goPath('/pages/shop/goods/goods')">
				<image :src="$IMG_URL+'mall.png'" class="item-img"></image>
				<view style="margin-top: 8rpx;">商城</view>
			</view>
		</view>
		<view class="msg-con" style="margin-top: 23rpx;">
			<!-- <view class="msg-item" @click="goPath('/pages/user/wallet/wallet')">
				<image :src="$IMG_URL+'wallet.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">我的钱包</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;margin-left: auto;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="msg-item" @click="goPath('/pages/user/set/set')">
				<image :src="$IMG_URL+'set.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">设置</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;margin-left: auto;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line> -->
			<view class="msg-item" @click="goPath('/pages/user/realName/realName')">
				<image :src="$IMG_URL+'verified.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;" class="flex-row"><span style="color: #FF3902;">*</span>实名认证（必填项）
				</view>
				<view class="msg-text">未填写</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="msg-item">
				<image :src="$IMG_URL+'serviceArea.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;" class="flex-row"><span style="color: #FF3902;">*</span>服务区域（必填项）
				</view>
				<view class="msg-text">未填写</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="msg-item" @click="goPath('/pages/user/serverType/serverType')">
				<image :src="$IMG_URL+'category.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;" class="flex-row"><span style="color: #FF3902;">*</span>服务品类（必填项）
				</view>
				<view class="msg-text">未填写</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="msg-item" @click="seclectAdress">
				<image :src="$IMG_URL+'address.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;" class="flex-row"><span style="color: #FF3902;">*</span>常驻地址（必填项）
				</view>
				<view class="msg-text">未填写</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="msg-item" @click="goPath('/pages/website/website')">
				<image :src="$IMG_URL+'verified.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">特约网点加盟申请
				</view>
				<view class="msg-text">未填写</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="msg-item">
				<image :src="$IMG_URL+'team.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">我的团队</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;margin-left: auto;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<!-- <view class="msg-item">
				<image :src="$IMG_URL+'margin.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">我的保证金</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;margin-left: auto;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line> -->
			<view class="msg-item" @click="goPath('/pages/user/certificate/certificate')">
				<image :src="$IMG_URL+'certificate.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">专业证书认证</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;margin-left: auto;">
				</image>
			</view>

		</view>
		<view class="msg-con" style="margin-top: 23rpx;">
			<view class="msg-item" @click="goPath('/pages/user/feedback/feedback')">
				<image :src="$IMG_URL+'margina.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">意见反馈</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;margin-left: auto;">
				</image>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="msg-item" @click="goPath('/pages/user/wx/wx')">
				<image :src="$IMG_URL+'noPublic.png'" class="item-img"></image>
				<view style="margin-left: 19rpx;">微信公众号</view>
				<image :src="$IMG_URL+'jump.png'" style="width: 31rpx;height: 31rpx;margin-left: auto;">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 99,
				src: "https://cdn.uviewui.com/uview/album/2.jpg",
				latitude: "",
				longitude: "",
				addressArea: "",
				opacityVal: 0,
				topHeight: '90px'
			}
		},
		onLoad() {
			this.topHeight = uni.$u.sys().statusBarHeight + 44 + 'px'
		},
		onPageScroll(e) {
			let top = e.scrollTop;
			this.opacityVal = top > 300 ? 1 : top * 0.008;
		},
		methods: {
			seclectAdress() {
				uni.chooseLocation({
					success: res => {
						console.log(res);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.getLocationInfo(res.longitude, res.latitude);
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			async getLocationInfo(lon, lat) {
				const res = await uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?location=${lon},${lat}&key=fd72b585535807dff26f27a57ec1f263`

				});
				console.log(res);
				if (res.data.status == 1) {
					this.addressArea = res.data.regeocode.formatted_address
					const addressComponent = res.data.regeocode.addressComponent;
					if (addressComponent.city.length) {
						this.adressValue =
							`${addressComponent.province}-${addressComponent.city}-${addressComponent.district}`;
						this.area = addressComponent.province + addressComponent.city + addressComponent.district;
					} else {
						this.adressValue = `${addressComponent.province}-${addressComponent.district}`;
						this.area = addressComponent.province + addressComponent.district;
					}

					this.adressDetail = res.data.regeocode.formatted_address.replace(
						`${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');

					this.workarea = `${addressComponent.city} ${addressComponent.district}`
				}
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mine-nav {
		position: relative;
	}

	.nav-con {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.nav-bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #0277de;
	}

	.nav-top {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.nav-middle {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 35rpx;
		color: #000000;
		padding: 23rpx 31rpx;

	}

	.middle-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.item-text {
			font-weight: 400;
			font-size: 23rpx;
			margin-top: 8rpx;
		}
	}

	.mine-avatar {
		padding: 31rpx;
		display: flex;
	}

	.avatar-text {
		margin-left: 27rpx;
		font-size: 27rpx;
		color: #000000;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #fff;
	}

	.nav-list {
		width: 688rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		height: 185rpx;
	}

	.nav-list-list {
		flex: 1;
		height: 185rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 27rpx;
		color: #000000;

		.item-img {
			width: 92rpx;
			height: 92rpx;
		}
	}

	.msg-con {
		width: 688rpx;
		margin: 0 auto;
		margin-top: 31rpx;
		background: #FFFFFF;
		padding-left: 23rpx;
		padding-right: 15px;
		border-radius: 10rpx;
		position: relative;

		.msg-item {
			display: flex;
			align-items: center;
			padding: 23rpx 0;
			font-size: 27rpx;
			color: #000000;

			.item-img {
				width: 58rpx;
				height: 58rpx;
			}

			.msg-text {
				margin-left: auto;
				font-size: 23rpx;
				color: #999999;
				margin-right: 8px;
			}
		}
	}
</style>